<template>
  <div class="container">
    <el-dialog
      title="设置过滤条件"
      :before-close="dialogClose"
      :visible.sync="dialogShow"
      width="600px"
    >
      <el-form ref="form" v-loading="submitLoading" label-width="90px">
        <el-form-item label="工作经验：">
          <el-select
            v-model="form.experience"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in experience"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学历要求：">
          <el-select
            v-model="form.eduLevel"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in eduLevels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄要求：">
          <el-select
            v-model="form.jobMaxAge"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in age"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="语言：">
          <el-select
            v-model="form.language"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in language"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio-group v-model="form.sex">
            <el-radio
              v-for="item in sex"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="职称：">
          <el-select
            v-model="form.jobRequire"
            placeholder="请选择"
            style="width: 100%"
			clearable
          >
            <el-option
              v-for="item in jobRequire"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="专业要求：">
          <el-select
            v-model="form.jobSubject"
            style="width: 100%"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="subjectPemoteMethod"
            :loading="subjectOptionsLoading"
            clearable
          >
            <el-option
              v-for="item in subjectOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="submitLoading"
          @click="submitForm"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { baseSo } from '@/api/common'
import { mapState } from 'vuex'
import store from '@/store'
import { opFilterAdd, opFilterOne, opFilterEdit } from '@/api/position'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      noFilter: true,
      submitLoading: false,
      dialogShow: false,
      form: {
        sex: '',
        jobRequire: '',
        language: '',
        eduLevel: '',
        jobMaxAge: '',
        jobMinAge: '',
        minExperience: '',
        maxExperience: '',
        jobSubject: []
      },
      subjectOptions: [],
      subjectOptionsLoading: false
    }
  },
  // 方法
  methods: {
    show(id) {
      if (id) {
        opFilterOne({ id: id }).then((res) => {
          const data = res.result
          if (data.jobSubject) {
            data.jobSubject = data.jobSubject.split(',')
            const subjectText = data.jobSubject_dictText.split(',')
            subjectText.forEach((item, index) => {
              this.subjectOptions.push({
                id: data.jobSubject[index],
                title: item
              })
            })
          } else {
            data.jobSubject = []
          }
          this.form = {
            id: data.id,
            sex: data.sex + '',
            jobRequire: data.jobRequire != null ? data.jobRequire + '' : '',
            language: data.language + '',
            jobMinAge: '0',
            eduLevel: data.eduLevel != null ? data.eduLevel + '' : '',
            jobMaxAge: data.jobMaxAge != null ? data.jobMaxAge + '' : '',
            minExperience: data.minExperience + '',
            maxExperience: data.maxExperience + '',
            jobSubject: data.jobSubject,
            experience: data.minExperience != null ? data.minExperience + ',' + data.maxExperience : ''
          }
        })
      }
      this.dialogShow = true
    },
    // 专业要求异步搜索
    subjectPemoteMethod(query) {
      if (query) {
        this.subjectOptionsLoading = true
        baseSo({
          'title.keywords': query,
          type: 'speciality',
          pageNo: 1,
          pageSize: 30
        }).then((res) => {
          this.subjectOptions = res.result
          this.subjectOptionsLoading = false
        })
      } else {
        this.subjectOptions = []
      }
    },
    submitForm() {
      const form = JSON.parse(JSON.stringify(this.form))
      if (form.experience) {
        const experience = form.experience.split(',')
        form.minExperience = experience[0]
        form.maxExperience = experience[1]
      }
      form.jobSubject = form.jobSubject.join(',')
      let resstr = ''
      Object.keys(form).forEach(item => {
        if (item != 'id') { resstr += form[item] }
      })
      if (!resstr) {
        this.noFilter = true;
        this.$message.error('请至少添加一条过滤条件')
        return false
      }else{
        this.noFilter = false;
      }
      this.submitLoading = true
      if (form.id) {
        opFilterEdit(form).then((res) => {
          this.dialogClose()
        })
      } else {
        opFilterAdd(form).then((res) => {
          this.$emit('result', res.message)
          this.dialogClose()
        })
      }
    },
    dialogClose() {
      if (this.noFilter) {
        this.$emit('noFilter')
      }
      this.noFilter = true;
      this.subjectOptions = []
      this.form = this.$options.data().form
      this.submitLoading = false
      this.dialogShow = false
    }
  },
  computed: {
    ...mapState({
      sex: (state) => state.app.sex, // 招聘类型
      jobRequire: (state) => state.app.jobRequire, // 职称要求
      experience: (state) => state.app.experience, // 经验限制
      eduLevels: (state) => state.app.eduLevels, // 经验限制
      language: (state) => state.app.language, // 经验限制
      age: (state) => state.app.age // 性别
    })
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {}
}
</script>
<style lang="scss" scoped>
</style>
